<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="app" width="800" height="600">
        your browser don't support canvas
    </canvas>

    <script src="../lib/webgl-utils.js"></script>
    <script src="../lib/webgl-debug.js"></script>
    <script src="../lib/cuon-utils.js"></script>
    <script src="../lib//cuon-matrix.js"></script>

    <script>
        var VSHADER_SOURCE = `
              attribute vec4 a_Position;
              attribute vec4 a_Color;
              uniform mat4 u_ViewMatrix;
              varying vec4 v_Color;
              void main(){
                  gl_Position = u_ViewMatrix * a_Position;
                  v_Color = a_Color;
              }
          `;
        
        var FSHADER_SOURCE = `
              precision mediump float;
              varying vec4 v_Color;
              void main(){
                  gl_FragColor = v_Color;
              }
          `;

        var canvas = document.getElementById('app');
        /** @type {WebGLRenderingContext}*/
        var gl = getWebGLContext(canvas);

        if(!gl) throw new Error("can't get webgl context");

        if(!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)){
            throw new Error("can't init shaders");
        }
        
        var n = initVertexBuffer(gl);
        if(n < 0) throw new Error("can't init vertex buffer");

        var u_ViewMatrix = gl.getUniformLocation(gl.program,'u_ViewMatrix');
        var viewMatrix = new Matrix4();
        viewMatrix.setLookAt(0.20, 0.25, 0.25, 0, 0, 0, 0, 1, 0);
        gl.uniformMatrix4fv(u_ViewMatrix, false, viewMatrix.elements);

        gl.clearColor(0.0, 0.0, 0.0, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);
        gl.drawArrays(gl.TRIANGLES, 0, n);

        function initVertexBuffer(/** @type{WebGLRenderingContext}*/ gl){
            let vertices = new Float32Array([
                // 顶点坐标和颜色
                0.0,  0.5,  -0.4,  0.4,  1.0,  0.4, // 绿色三角形在后面
                -0.5, -0.5,  -0.4,  0.4,  1.0,  0.4,
                0.5, -0.5,  -0.4,  1.0,  0.4,  0.4,

                0.5,  0.4,  -0.2,  1.0,  0.4,  0.4, // 黄色三角形在中间
                -0.5,  0.4,  -0.2,  1.0,  1.0,  0.4,
                0.0, -0.6,  -0.2,  1.0,  1.0,  0.4,

                0.0,  0.5,   0.0,  0.4,  0.4,  1.0,  // 蓝色三角形在最前面
                -0.5, -0.5,   0.0,  0.4,  0.4,  1.0,
                0.5, -0.5,   0.0,  1.0,  0.4,  0.4
            ]);
            let n = 9;

            let vertexBuffer = gl.createBuffer();
            let FSIZE= vertices.BYTES_PER_ELEMENT;
            gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
            gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

            var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
            gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, FSIZE * 6, 0);
            gl.enableVertexAttribArray(a_Position);

            var a_Color = gl.getAttribLocation(gl.program, 'a_Color');
            gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 6, FSIZE * 3);
            gl.enableVertexAttribArray(a_Color);

            return n;
        }
        
    </script>
</body>
</html>